<h1>Runtimes</h1>

<ng-container *ngIf="(runtimes | async) as dataSource">
  <table mat-table [dataSource]="dataSource" [trackBy]="track">

    <ng-container matColumnDef="icon">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--icon-cell"></th>
      <td mat-cell *matCellDef>
          <i class="fas fa-cogs"></i>
      </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let runtime">
        {{runtime.specName}}
      </td>
    </ng-container>

    <ng-container matColumnDef="version">
      <th mat-header-cell *matHeaderCellDef>Version</th>
      <td mat-cell *matCellDef="let runtime">
        <a [routerLink]="runtime.specName + '-' + runtime.specVersion.toString()">{{runtime.specVersion}}</a>
      </td>
    </ng-container>

    <ng-container matColumnDef="blockNumber">
      <th mat-header-cell *matHeaderCellDef>Block Activated</th>
      <td mat-cell *matCellDef="let runtime" [title]="'Block hash: ' + runtime.blockHash">
        {{runtime.blockNumber}}
      </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef>Date Activated</th>
      <td mat-cell *matCellDef="let runtime" [title]="(blockDates[runtime.blockNumber] | async) || ''">
        <ng-container *ngIf="blockDates[runtime.blockNumber] | async as blockDate">
          {{blockDate | date}}
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="pallets">
      <th mat-header-cell *matHeaderCellDef>Pallets</th>
      <td mat-cell *matCellDef="let runtime">
        {{runtime.countPallets}}
      </td>
    </ng-container>

    <ng-container matColumnDef="events">
      <th mat-header-cell *matHeaderCellDef>Events</th>
      <td mat-cell *matCellDef="let runtime">
        {{runtime.countEvents}}
      </td>
    </ng-container>

    <ng-container matColumnDef="calls">
      <th mat-header-cell *matHeaderCellDef>Call Functions</th>
      <td mat-cell *matCellDef="let runtime">
        {{runtime.countCallFunctions}}
      </td>
    </ng-container>

    <ng-container matColumnDef="storage">
      <th mat-header-cell *matHeaderCellDef>Storage Functions</th>
      <td mat-cell *matCellDef="let runtime">
        {{runtime.countStorageFunctions}}
      </td>
    </ng-container>

    <ng-container matColumnDef="constants">
      <th mat-header-cell *matHeaderCellDef>Constants</th>
      <td mat-cell *matCellDef="let runtime">
        {{runtime.countConstants}}
      </td>
    </ng-container>

    <ng-container matColumnDef="details">
      <th mat-header-cell *matHeaderCellDef class="mat-cell--details-link-cell"></th>
      <td mat-cell *matCellDef="let runtime">
          <a [routerLink]="runtime.specName + '-' + runtime.specVersion.toString()"><span class="material-icons">chevron_right</span></a>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="visibleColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: visibleColumns"></tr>

  </table>
</ng-container>
